import React, { Component } from 'react'
import './edit.css'
import service from '../../../utils/service'
import type { DatePickerProps } from 'antd';
import { DatePicker, Space, Button, message, } from 'antd';

export default class Edit extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            nam: '',
            address: '',
            typ: '',
            run: '',
            admin: '',
            pws: '',
            tim: ''
        }
    }
 
    // 时间选择器
    onChange = (date: any, dateString: any) => {
        this.setState({
            tim: dateString
        })
    };
    fun01 = () => {
        this.props.history.push('/Main/Visitor')
    }
   
    // 添加设备名
    nam = (e: any) => {
        this.setState({
            nam: e.target.value

        })
    }
    //添加MAC地址
    address = (e: any) => {
        this.setState({
            address: e.target.value

        })
    }
    // 添加屏幕类型
    typ = (e: any) => {
        this.setState({
            typ: e.target.value

        })
    }
    // 添加运行状态
    run = (e: any) => {
        this.setState({
            run: e.target.value

        })
    }
    // 添加用户名
    admin = (e: any) => {
        this.setState({
            admin: e.target.value

        })
    }
    // 添加密码
    pws = (e: any) => {
        this.setState({
            pws: e.target.value

        })
    }
    fun02 = () => {
        if (this.state.nam == '' || this.state.address == '' || this.state.typ == '' || this.state.run == '' || this.state.admin == '' || this.state.pws == '' || this.state.tim == '') {
            alert('请输入内容')
        } else if (this.state.nam !== '' && this.state.address !== '' && this.state.typ !== '' && this.state.run !== '' && this.state.admin !== '' && this.state.pws !== '' && this.state.tim !== '') {
            this.props.history.push('/Main/Visitor')
            service({
                url: '/passenger',
                method: 'post',
                data: {
                    name: this.state.nam,
                    time: this.state.tim,
                    MAC: this.state.address,
                    typ: this.state.typ,
                    sta: this.state.run
                }
            })
        }
    }
    render() {
        return (
            <div>
                <h4>添加访客机</h4>
                <div className='box-edit'>
                    <div className='dv' >
                        学校名称：<input disabled={true} value='西安市高新区千锋学校' className='school'/>
                    </div>
                    <div className='dv'>
                        &nbsp;&nbsp;&nbsp;设备名：<input className='int' onChange={this.nam} placeholder='学校西门访客机x'></input>
                    </div>
                    <div className='dv'>
                        MAC地址：  <input className='int1' onChange={this.address} placeholder='5489-9924-48xx'></input>
                    </div>
                    <div className='dv'>
                        &nbsp;屏幕类型：<input className='int1' onChange={this.typ} placeholder='单屏/双屏'></input>
                    </div>
                    <div className='dv'>
                        运行状态：<input className='int1' onChange={this.run} placeholder='运行中/暂停运行'></input>
                    </div>
                    <div className='dv'>
                        添加时间：<Space direction="vertical"><DatePicker onChange={this.onChange} style={{ width: '310px' }} />
                        </Space>
                    </div>
                    <div className='dv'>
                        &nbsp;用户名：<input className='int1' onChange={this.admin}></input>
                    </div>
                    <div className='dv'>
                        &nbsp;&nbsp;&nbsp;&nbsp;密码：<input className='int1' onChange={this.pws}></input>
                    </div>
                    <div className='dv'>
                        <button onClick={this.fun02} style={{ backgroundColor: '#1890FF', border: 'none', color: '#FFF', width: '80px', height: '35px', borderRadius: '4px', marginLeft: '15px', fontSize: '13px' }}>确定</button>
                        <button onClick={this.fun01} style={{ backgroundColor: '#FFF', border: '1px solid rgb(228, 228, 228)', color: '#333', width: '80px', height: '35px', borderRadius: '4px', marginLeft: '15px', fontSize: '13px' }}>取消</button>
                    </div>
                </div>

            </div>
        )
    }
}
